<script setup lang="ts">

import {ref, watch} from "vue";

const props = defineProps(["data", "keyName"])
const emits = defineEmits(["save","delete", "cancel"])

let showEdit = ref(false)
let model = ref<any>({})

model.value = props.data
watch(props.data, (oldVal, newVal) => {
  model.value = newVal
})

if (props.data.isEdit){
  showEdit.value = true
}

const onSave = () => {
  showEdit.value = false
  emits("save", model.value)
}
const onDelete = () => {
  showEdit.value = false
  emits("delete", model.value)
}
const onCancel = () => {
  showEdit.value = false
  emits("cancel", model.value)
}
const onEdit = () => {
  showEdit.value = true
  console.log(model.value)
}
</script>

<template>
  <div class="m-table-column" v-if="showEdit">
    <el-input class="col" v-model="model.propertyName" />
    <div class="col">
      <el-select style="width: 100%;" v-model="model.dataType" clearable placeholder="选择数据类型">
        <el-option :value="1" label="数值">数值</el-option>
        <el-option :value="2" label="字符串">字符串</el-option>
        <el-option :value="3" label="日期">日期</el-option>
        <el-option :value="4" label="布尔">布尔</el-option>
      </el-select>
    </div>
    <el-checkbox class="col" v-model="model.showSearch" :true-value="1" :false-value="0"/>
    <el-checkbox class="col" v-model="model.showListItem" :true-value="1" :false-value="0"/>
    <div class="col">
      <el-button class="col" link type="primary" size="small" @click="onSave">保存</el-button>
      <el-button link type="primary" @click="onCancel">取消</el-button>
    </div>
  </div>
  <div class="m-table-column" v-else>
    <label class="col" style="font-size: 0.5em;">{{model.propertyName}}</label>
    <label class="col" style="font-size: 0.5em;">{{model.dataType}}</label>
    <el-checkbox class="col" v-model="model.showSearch" :true-value="1" :false-value="0" disabled/>
    <el-checkbox class="col" v-model="model.showListItem" :true-value="1" :false-value="0" disabled/>
    <div class="col">
      <el-button link type="primary" size="small" @click="onEdit">编辑</el-button>
      <el-button link type="danger" size="small" @click="onDelete">删除</el-button>
    </div>
  </div>
</template>

<style scoped>
.m-table-column{
  display: flex;
  column-gap: 10px;
  .col{
    width: 20%;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-content: center;
  }
}
</style>